<template>
    <div>
        <div class="codew" @click="generateQRCode">生成二维码</div>
        <div class="e"><img v-if="qrCodeUrl" :src="qrCodeUrl" alt="QR Code" /></div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
// 定义响应式数据  
const qrCodeUrl = ref(null);

// 生成二维码的方法  
async function generateQRCode() {
    try {
        const response = await axios.get('/codeapi/generate-qrcode');
        qrCodeUrl.value = response.data;
    } catch (error) {
        console.error('生成二维码失败:', error);
    }
}

// 处理扫码后的验证  
// eslint-disable-next-line @typescript-eslint/no-unused-vars
async function handleQRCodeScan(token) {
    try {
        const response = await axios.get(`/codeapi/verify-qrcode?token=${token}`);
        // const { redirectUrl } = response.data;

        // 使用Vue Router进行路由跳转  

        const router = useRouter();
        router.push("/");
    } catch (error) {
        console.error('验证二维码失败:', error);
    }
}
</script>
<style>
.codew {
    font-size: 16px;



}

.e img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
}
</style>